<template>
  <div id="app">
    <div id="cartItem" v-for="item of carts" :key="item.id">
      <van-card
        :price="item.productPrice"
        :desc="item.productInfo"
        :title="item.productName"
        :thumb="item.productCover"
      >
        <template #footer>
          <template>
            小计：{{ (item.productPrice * item.productCount) | handleSum }}
          </template>
          <van-checkbox
            class="checkItem"
            v-model="item.isSelected"
            @change="handleItem"
          ></van-checkbox>
        </template>
        <template #num>
          <van-stepper min="1" value="item.productCount" />
        </template>
      </van-card>
    </div>
    <div class="botton">
      <van-submit-bar :price="sum()" button-text="提交订单">
        <van-checkbox v-model="allChecked" @click="changeAll"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Card } from "vant";
Vue.use(Card);
import { Checkbox, CheckboxGroup } from "vant";
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
import { Stepper } from "vant";
Vue.use(Stepper);
import { SubmitBar } from "vant";
Vue.use(SubmitBar);
export default {
  name: "app",
  data() {
    return {
      carts: [],
      allChecked: true,
    };
  },
  mounted() {
    this.$http.get("/cart").then((res) => {
      this.carts = res.data;
    });
  },
  filters: {
    handleSum(val) {
      return val.toFixed(2) + "元";
    },
  },
  methods: {
    sum() {
      var carts = this.carts;
      var all = 0;
      carts.forEach((item) => {
        if (item.isSelected) {
          all += item.productPrice * item.productCount;
        }
      });
      all = all * 100;
      return all;
    },
    changeAll() {
      
      this.carts.forEach((item) => {
        item.isSelected = this.allChecked;
      });
    },
    handleItem() {
      console.log(this.allChecked);
      this.allChecked = this.carts.every(item=>item.isSelected)
      // this.allChecked=allChecked
    },
  },
};
</script>

<style>
.checkItem {
  position: absolute;
  top: 40%;
  left: 10px;
}
#app {
  width: 400px;
  border: 1px solid #333;
}
.van-submit-bar {
  width: 400px !important;
  position: unset !important;
}
#cartItem {
  border-bottom: 1px solid #666;
}
.van-image__img {
  width: 66px;
  position: relative;
  left: 15px;
}
</style>
